<template>
    <div class="chart">
        <div class="wrap" :id="'myEcharts'+index"></div>
    </div>
</template>
<script>
import { reactive, toRefs, onMounted } from "vue"
import * as echarts from "echarts"
import moment from "moment"
export default {
    props: ["index"],
    setup(props) {
        let state = reactive({
            index: props.index
        })
        function initEcharts() {
            let dayOfYear =
                // ((moment().subtract(1, "days").dayOfYear() - preQuarterDays ? preQuarterDays : 90) / currentQuarterDays ? currentQuarterDays : 91) * 100.0
                ((moment().subtract(1, "days").dayOfYear() - 181) / 92) * 100.0
            const gaugeData = [
                {
                    value: dayOfYear,
                    // name: titleName ? titleName : "二季度营销",
                    name: "三季度营销进度",
                    title: {
                        offsetCenter: ["0%", "20%"]
                    },
                    detail: {
                        valueAnimation: true,
                        offsetCenter: ["0%", "-20%"]
                    }
                }
            ]
            const option = {
                series: [
                    {
                        type: "gauge",
                        startAngle: 90,
                        endAngle: -270,
                        pointer: {
                            show: false
                        },
                        color: "#89D9FD",
                        // color: "#DA360F",
                        progress: {
                            show: true,
                            overlap: false,
                            roundCap: true,
                            clip: false,
                            itemStyle: {
                                borderWidth: 1,
                                borderColor: "#464646"
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                width: 10
                            }
                        },
                        splitLine: {
                            show: false,
                            distance: 0,
                            length: 10
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            show: false,
                            distance: 50
                        },
                        data: gaugeData,
                        title: {
                            fontSize: 8
                        },
                        detail: {
                            fontSize: 12,
                            // formatter: "{value}%",
                            formatter: (value) => {
                                if (value >= 100) return "100" + "%"
                                var s = value + ""
                                var str =
                                    s.substring(0, s.indexOf(".") + 3) + "%"
                                return str
                            }
                        }
                    }
                ]
            }
            let myChart = echarts.init(
                document.getElementById("myEcharts" + state.index)
            )
            myChart.setOption(option)
            //监听窗口的变化，不想屏幕自适应可以不写
            window.addEventListener("resize", function () {
                myChart.resize()
            })
        }

        onMounted(() => {
            initEcharts()
        })
        return {
            ...toRefs(state)
        }
    }
}
</script>
<style lang="scss" scoped>
.wrap {
    width: 80px;
    height: 80px;
}
</style>